<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('工作流列表')">

</head>
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12" style="padding: 0;margin-top: 5px;">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-list"></i>工作流列表
                    </h2>
                    <div class="box-icon">
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline form-search " role="form" th:action="@{/workflow/list}">
                        <div class="form-group" data-chosenWidth="true"  style="margin-bottom: 5px;">
                            <select name="pageSize" class="form-control input-md" id="pagesize">
                                <option value="10" th:selected="${pageSize==10}">10条/页</option>
                                <option value="25" th:selected="${pageSize==25}">25条/页</option>
                                <option value="50" th:selected="${pageSize==50}">50条/页</option>
                            </select>
                            <select name="listProcessSettingId" class="selectpicker" multiple th:title="请选择工作流类型">
                                <!--<option value="">工作流类型</option>-->
                                <option th:each="item:${listType}" th:selected="${record.listProcessSettingId==null?false:#lists.contains(record.listProcessSettingId,item.processSettingId)}" th:value="${item.processSettingId}" th:text="${item.processName}"></option>
                            </select>
                            <select name="state" class="form-control input-md">
                                <option value="">状态</option>
                                <option value="1" th:selected="${record.state==1}">审批中</option>
                                <option value="2" th:selected="${record.state==2}">已完成</option>
                                <option value="0" th:selected="${record.state==0}">已作废</option>
                            </select>
                            <select name="countingClass" class="form-control input-md">
                                <option value="">是否计算老师课时</option>
                                <option value="1" th:selected="${record.countingClass==1}">是</option>
                                <option value="0" th:selected="${record.countingClass==0}">否</option>
                            </select>
                            <select name="returnClass" class="form-control input-md">
                                <option value="">是否返还课时</option>
                                <option value="1" th:selected="${record.returnClass==1}">是</option>
                                <option value="0" th:selected="${record.returnClass==0}">否</option>
                            </select>
                            <input name="startDate" id="startDate" class="form-control input-md" maxlength="10" style="min-width:100px;" th:value="${record.startDate}" placeholder="课程开始日期" onfocus="WdatePicker()" autocomplete="off"/>
                            <input name="endDate" id="endDate" class="form-control input-md" maxlength="10" style="min-width:100px;" th:value="${record.endDate}" placeholder="课程结束日期" onfocus="WdatePicker()" autocomplete="off"/>
                            <input name="id" id="workflowId" class="form-control input-md" maxlength="10" style="min-width:60px;" th:value="${record.id}" placeholder="工作流ID" autocomplete="off"/>
                            <div class="input-group input-group-md">
                                <input type="search" name="searchKey" id="search" class="form-control input-md" th:value="${record.searchKey}" placeholder="查询关键字..." style="width:200px;"/>
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="submit" > 查 询 </button>
                                </span>
                            </div>
                        </div>
                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
                        <tr>
                            <th class="text-center">序号</th>
                            <th class="text-center" >工作流类型</th>
                            <th class="text-center">创建时间</th>
                            <th class="text-center">创建人</th>
                            <th class="text-center" data-breakpoints="xs">课程老师</th>
                            <th class="text-center" data-breakpoints="xs">课程时间</th>
                            <th class="text-center" data-breakpoints="xs">上课学员</th>
                            <th class="text-center" data-breakpoints="xs">课程状态</th>
                            <th class="text-center" data-breakpoints="xs">工作流状态</th>
                            <th class="text-center" data-breakpoints="xs">待审批人</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="item,itemStat:${pageInfo.list}">
                            <td class="text-center" th:utext="${itemStat.index+1}"></td>
                            <td class="text-center" th:text="${item.processName}"></td>
                            <td class="text-center" th:text="${#dates.format(item.createTime,'yyyy-MM-dd HH:mm:ss')}"></td>
                            <td class="text-center" th:text="${item.creator}"></td>
                            <td class="text-center" th:text="${item.teacherLogin}"></td>
                            <td class="text-center" th:text="${#dates.format(item.classTime,'yyyy/MM/dd H:mm')}"></td>
                            <td class="text-center" th:text="${item.studentLogin}"></td>
                            <td class="text-center" th:switch="${item.classState}">
                                <span class="label-info label" th:case="1">待上课</span>
                                <span class="label-success label" th:case="2">已完成</span>
                                <span class="label-danger label" th:case="3">已旷课</span>
                                <span class="label-warning label" th:case="4">已取消</span>
                            </td>
                            <td class="text-center" th:switch="${item.state}">
                                <span class="label-default label" th:case="0">已终止</span>
                                <span class="label-danger label" th:case="1">审批中</span>
                                <span class="label-success label" th:case="2">已完成</span>
                                <span class="label-warning label" th:case="3">已撤回</span>
                            </td>
                            <td class="text-center" th:text="${item.approval}"></td>
                            <td>
                                <button class="btn btn-primary btn-xs" th:if="${item.approvalAuthority==1}" th:onclick="|openWindow(this)|" style="margin-bottom:3px;" th:data-workflowId="${item.id}" th:data-creator="${item.creator}" th:data-processName="${item.processName}" th:data-approvalId="${item.approvalId}" th:data-auth="${item.approvalAuthority}"> <i class="glyphicon glyphicon-edit icon-white"></i> 审批 </button>
                                <button class="btn btn-info btn-xs" th:unless="${item.approvalAuthority==1}" th:onclick="|openWindow(this)|" style="margin-bottom:3px;" th:data-workflowId="${item.id}" th:data-creator="${item.creator}" th:data-processName="${item.processName}" th:data-approvalId="${item.approvalId}" th:data-auth="${item.approvalAuthority}"> <i class="glyphicon glyphicon-zoom-in icon-white"></i> 查看 </button>
                                <button class="btn btn-warning btn-xs" th:if="${item.creator==session.loginname && ((item.state!=2 && item.finishApprovalNum==0) or item.processSettingId==6)}" th:onclick="|editApproval(${item.id})|" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 修改 </button>
                                <button class="btn btn-danger btn-xs" th:if="${item.creator==session.loginname && item.state==1 && item.finishApprovalNum==0}" th:onclick="|revokeWorkflow(${item.id})|" style="margin-bottom:3px;"> <i class="glyphicon glyphicon-edit icon-white"></i> 撤回 </button>
                            </td>
                        </tr>
                        </tbody>

                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script src="https://hkres.etalk365.com/public/lib/popper/1.15.0/umd/popper.min.js"></script>
    <script>
        $(function() {
            $('.footable').footable();

        });

        //打开旧版页面的按钮
        function openWindow(obj) {
            let workflowId=$(obj).data("workflowid");
            let approvalId=$(obj).data("approvalid");
            let authVal=$(obj).data("auth");
            let url="/workflow/view/"+$(obj).data("workflowid");
            if (parseInt(authVal)===1){
                layer.open({
                    type: 2,
                    title: $(obj).data("creator")+"提交的"+$(obj).data("processname")+"工作流",
                    closeBtn: 1, //显示关闭按钮
                    shade: [0],
                    area: ['80%', '90%'],
                    //offset: 'rb', //右下角弹出
                    // time: 2000, //2秒后自动关闭
                    anim: 2,
                    btn: ['同意', '拒绝'],
                    yes: function(index, layero){
                        //按钮【按钮一】的回调
                        openApproval(workflowId,approvalId,1);
                        return false
                    },
                    btn2: function(index, layero){
                        openApproval(workflowId,approvalId,0);
                        return false //开启该代码可禁止点击该按钮关闭
                    },
                    content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                    end: function () {
                        // location.reload(true);
                    }
                });
            }else {
                layer.open({
                    type: 2,
                    title: $(obj).data("creator")+"提交的"+$(obj).data("processname")+"工作流",
                    closeBtn: 1, //显示关闭按钮
                    shade: [0],
                    area: ['80%', '90%'],
                    //offset: 'rb', //右下角弹出
                    // time: 2000, //2秒后自动关闭
                    anim: 2,
                    content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                    end: function () {
                        // location.reload(true);
                    }
                });
            }
        }
        //打开审批页面
        function openApproval(workflowId,approvalId,approvalState) {
            let url="/workflow/init/approval/"+workflowId+"/"+approvalId+"/"+approvalState;
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0],
                area: ['60%', '70%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    location.reload(true);
                }
            });
        }

        //打开修改界面
        function editApproval(workflowId) {
            let url="/workflow/init/edit/"+workflowId;
            layer.open({
                type: 2,
                title: false,
                closeBtn: 1, //显示关闭按钮
                shade: [0.3],
                area: ['80%', '99%'],
                //offset: 'rb', //右下角弹出
                // time: 2000, //2秒后自动关闭
                anim: 2,
                content: [url, 'yes'], //iframe的url，no代表不显示滚动条
                end: function () {
                    location.reload(true);
                }
            });
        }

        function revokeWorkflow(workflowId) {
            loadIndex = layer.load();
            let url="/workflow/revoke/"+workflowId;
            $.post(url,{},function (result) {
                if (result.status>0){
                    layer.msg("撤销工作流成功",{icon:1},function () {
                        location.reload(true);
                    });
                }else {
                    layer.msg("撤销工作流失败",{icon:2},function () {
                        location.reload(true);
                    });
                }
            },'json');
        }
    </script>
</div>
</body>
</html>